<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API列表页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/API.css">
</head>
<body>
    <!-- 页面顶部导航 -->
    <div class=" top-nav ">
        <a href="#">
            <img src="./imgs/new-logo-white2.png" alt="">
        </a>
        <nav class="menu">
            <a href="#">首页</a>
            <a href="#" class="active">API</a>
            <!-- <a href="#">云服务</a> -->
            <a href="#">案例</a>
            <!-- <a href="#">开发者</a> -->
        </nav>
        <div class="btns">
            <a href="#" class="login-btn">登录</a>
            <a href="#" class="register-btn">注册有礼</a>
        </div>
    </div>
    <!-- API分类 -->
    <div class="container api-list">
        <h2>API分类</h2>
        <div class="api-list-top">
            
            <a href="#">全部</a>
            <a href="#">生活服务</a>
            <a href="#" class="api-link">免费接口大全</a>
            
            

            
        </div>
        <p class="api-search">
            <span>
                <strong>全部</strong>
                <input type="text" placeholder="身份证实名">
                <img src="./imgs/magnifier.png" alt="">
            </span>
        </p>
        <div class="api-content">
            <ul class="cf">
                <li>
                    <span class="api-content-header company-free">
                        企业专用
                    </span>
                    <div class="content">
                        <a href="api_details.html">
                            <img src="./imgs/API_01.jpg" alt="">
                            <p class="content-title">2021出行防疫政策指南</p>
                            <p class="free">免费</p>
                        </a>
                    </div>
                    <a href="" class="api-content-btn">申请数据</a>
                </li>
                <li>
                    <span class="api-content-header company-money">
                        企业专用
                    </span>
                    <div class="content">
                        <a href="api_details.html">
                            <img src="./imgs/API_02.jpg" alt="">
                            <p class="content-title">身份证实名认证</p>
                            <p class="price">￥0.2000/次</p>
                        </a>
                    </div>
                    <a href="" class="api-content-btn">申请数据</a>
                </li>
            </ul>
            <!-- 弹出的对话框（模态框） -->
            <div class="mask">
                <div class="mask-content">
                    <a href=""><img src="./imgs/loginlogo.png" alt=""></a>
                    <div class="login">
                        <a href="#" class="active">账号登录</a>
                        <span>|</span>
                        <a href="#">扫码登录</a>
                    </div>
                    <div class="login-div account-login login-active">
                        <p class="mb login-username">
                            <!--  -->
                            <input type="text" name="" id="" placeholder="用户名/手机号/邮箱">
                            <img src="./imgs/clearInput.png" alt="">
                            <span class="login-logo"></span>
                            
                        </p>
                        <p class="login-password">
                            <!--  -->
                            <input type="password" name="" id="" placeholder="密码">
                            <span class="login-logo span-password"></span>
                            <img src="./imgs/clearInput.png" alt="">
                            <!-- <span class="eye"></span> -->
                        </p>
                        <p class="forget"><a href="#" >忘记密码</a></p>
                        <p>
                            <button type="submit">登录</button>
                        </p>
                        <p class="register-p"><span>还没有源码账号，</span><a href="./register.html">立即注册</a><span class="register-span"></span></p>
                        <div class="no-username">用户名格式不正确</div>
                        <div class="no-password">密码格式不正确</div>
                        <div class="login-success">登陆成功</div>
                    </div>
                    <div class="login-div scan-login">
                        <div class="qrcode">
                            <img src="./imgs/showqrcode.jpg" alt="">
                            <p>微信扫码登录</p>
                            <p>未关注源码科技公众号，请先关注后再登录</p>
                        </div>
                        <p class="register-p left"><span>还没有源码账号，</span><a href="./register.html">立即注册</a><span class="register-span"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面尾部分页器 -->
    <div class="container pages ">
        <div>
            <a class="pages-active">1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
            <a>7</a>
            <a>8</a>
            <span>......</span>
            <a class="next-page">下一页></a>
        </div>
    </div>
     <!-- 页面尾部 -->
    <div class="container cf footer">
        <div class="cf">
            <div class="fl footer-left">
                <div class="cf">
                    <dl class="fl">
                        <dt>联系与支持</dt>
                        <dd><a href="#">400-872-775</a></dd>
                        <dd><a href="#">售前咨询</a></dd>
                        <dd><a href="#">客服&售后</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">极速工单</a></dd>
                        <dd><a href="#">投诉与建议</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>关于源码</dt>
                        <dd><a href="#">400-872-775</a></dd>
                        <dd><a href="#">售前咨询</a></dd>
                        <dd><a href="#">客服&售后</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">极速工单</a></dd>
                        <dd><a href="#">投诉与建议</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>快速入口</dt>
                        <dd><a href="#">400-872-775</a></dd>
                        <dd><a href="#">售前咨询</a></dd>
                        <dd><a href="#">客服&售后</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">极速工单</a></dd>
                        <dd><a href="#">投诉与建议</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>产品服务</dt>
                        <dd><a href="#">400-872-775</a></dd>
                        <dd><a href="#">售前咨询</a></dd>
                        <dd><a href="#">客服&售后</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">极速工单</a></dd>
                        <dd><a href="#">投诉与建议</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>解决方案</dt>
                        <dd><a href="#">400-872-775</a></dd>
                        <dd><a href="#">售前咨询</a></dd>
                        <dd><a href="#">客服&售后</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">极速工单</a></dd>
                        <dd><a href="#">投诉与建议</a></dd>
                    </dl>
                </div>
            </div>
            <div class="fr footer-right">
                <p class="footer-right-title">微信公众号</p>
                <p class="footer-right-name">源码时代</p>
                <img src="./imgs/wechat-white.png" alt="">
            </div>
        </div>
        <p class="footer-foot">
            <a href="#" class="fl logo1">
                <img src="./imgs/bei1.png" alt="">
            </a>
            <a href="#" class="fl logo2">
                <img src="./imgs/bei2.png" alt="">
            </a>
            <span class="fl foot-left">
                增值电信业务经营许可证：蜀B2-20180596
                <a href="#">蜀ICP备15006450号-3</a>
                <a href="#">营业执照</a>
            </span>
            <span class="fr foot-right">源码大数据股份有限公司©版权所有</span>
        </p>
    </div>
    <script src="./js/API.js"></script>
</body>
</html>